<script>
  export default ({
    name:"myInterim",
    data(){
      return{
        isShow:true
      }
    },
    methods:{
      toggleShow(){
        this.isShow = !this.isShow
      }
    }
  })

</script>

<template>
    <div>
      <button @click="toggleShow">影藏/显示</button>
      <transition>
        <h1 v-show="isShow">我是采用过渡进行实现的</h1>
      </transition>
    </div>
</template>

<style scoped>
    h1{
      background-color: red;
    }
    /* 进入和离开的过渡时间 */
    .v-enter-active, .v-leave-active {
      transition: linear 1s;
    }

    /* 进入开始时的样式 */
    .v-enter-from {
      opacity: 0;
      transform: translateX(-100%);
    }

    /* 离开结束时的样式 */
    .v-leave-to {
      opacity: 0;
      transform: translateX(0%);
    }
</style>